import { message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css';
/* 创建画笔 */
import { createDraw } from './draw'
import { ref } from 'vue';
/* 查询工具 */
import { Query } from './ES6Query.js'
/* 从pinia引入地图 */
import { useMapStore } from 'stores/mapStore.js'
/* store数据响应式 */
import { storeToRefs } from 'pinia';
const { map } = storeToRefs(useMapStore())
/* 画笔 */
let eventDraw = ref(null)
/* 矢量数据源 */
let eventSource
/* 画布图层Layer */
const EventLayer = ref(null)
/* 结果数据源 */
let drawSource
/* 结果图层Layer */
const drawLayer = ref(null)
export class searchEvent {
    static activeDraw(fldNames, features, searchIsShow) {
        /* 在执行之前首先重置状态 */
        EventLayer.value = null
        drawLayer.value = null
        eventSource = null
        eventSource = null
        // 1创建画布
        /* 画布的矢量数据源 */
        eventSource = new ol.source.Vector({
            wrapx: false,
            crossOrigin: 'Anonymous',
        })
        /* 画布的矢量图层 */
        EventLayer.value = new ol.layer.Vector({
            source: eventSource,
        })
        eventDraw.value = createDraw({
            source: eventSource,
            type: 'Rectangle',
            callback: (e) => searchEvent.handleDraw(e, fldNames, features, searchIsShow)
        })
        /* 把画笔添加到图层 */
        map.value.addInteraction(eventDraw.value)
        map.value.addLayer(EventLayer.value)
        // 实例化一个矢量图层drawLayerr用于高亮显示结果
        drawSource = new ol.source.Vector({
            wrapX: false,
        });
    }
    static handleDraw(e, fldNames, features, searchIsShow) {
        eventSource.clear();
        drawSource.clear();
        console.log("画笔添加成功");
        // 每次画之前清空上次的数据源
        /* 根据几何图形查询 */
        const geom = e.feature.getGeometry();
        // 调用封装的查询的方法
        Query.queryByGeom({
            geometry: geom,
            service: {
                name: "guanggu",
                layerId: 2,
            },
            callback: res => searchEvent.onSuccess(res, fldNames, features, searchIsShow),
        });

    }
    static onSuccess(res, fldNames, features, searchIsShow) {
        console.log(res);
        // 要是 没有查到 就直接return
        if (res.TotalCount == 0) {
            /* 清除矢量数据源 */
            if (eventSource) {
                eventSource.clear();
            }
            if (drawSource) {
                drawSource.clear();
            }
            message.warning("此区域未查询到事件");
            return;
        }
        // 要是成功给数组赋值当前结果
        const queryResult = res;
        const name = queryResult.AttStruct.FldName;
        const info = queryResult.SFEleArray;
        name.map(item => {
            /* 最后图层不用加 */
            if (item != "mpLayer") {
                console.log(item);
                fldNames.value.push({
                    title: item,
                    dataIndex: item
                })
            }

        })
        info.map((item, index) => {
            const resInfo = item.AttValue

            features.value.push({
                key: index,
                事件编号: resInfo[0],
                事件类型: resInfo[1],
                事件等级: resInfo[2],
                发生时间: resInfo[3],
                发生地点: resInfo[4],
                车牌号: resInfo[5],
                驾驶员: resInfo[6],
                处理状态: resInfo[7],
            })
        })
        console.log(fldNames.value);
        console.log(features.value);
        console.log("查询结束");
        // 查到之后赋值并显示查到的结果框
        // this.showResult = true;
        //初始化Zondy.Format.PolygonJSON类
        var format = new Zondy.Format.PolygonJSON();
        //将MapGIS要素JSON反序列化为ol.Feature类型数组
        var selectFeatures = format.read(res);
        // 给高亮显示添加查询到的要素
        drawSource.addFeatures(selectFeatures);
        drawLayer.value = new ol.layer.Vector({
            source: drawSource,
            style: new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 17,
                    /* 填充色 */
                    fill: new ol.style.Fill({
                        color: "rgba(0,255,0,1)",
                    }),
                    /* 描边 */
                    stroke: new ol.style.Stroke({
                        color: "#ff2d51",
                        width: 2,
                    }),
                }),
            }),
        });
        map.value.addLayer(drawLayer.value);
        /*  */
        setTimeout(() => {
            message.success("查询成功")
            /* 打开查询信息对话框 */
            searchIsShow.value = true
        }, 1000);

    }
    static exit() {
        /* 清除画笔 */
        map.value.removeInteraction(eventDraw.value);
        eventDraw.value = null;
        /* 清除矢量数据源 */
        if (eventSource) {
            eventSource.clear();
        }
        if (drawSource) {
            drawSource.clear();
        }

        /* 清除两个图层 */
        map.value.removeLayer(EventLayer.value);
        map.value.removeLayer(drawLayer.value);

    }

}